Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / rnode / RNodeFlashAction.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"space-y-3"Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"errorMessage"

Te6edf3class=Ta5d6ff"flex items-start gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"

Te6edf3role=Ta5d6ff"alert"

Tff7b72>

Tff7b72<MaterialDesignIcon

Te6edf3icon-name=Ta5d6ff"alert-circle"

Te6edf3class=Ta5d6ff"size-4 mt-0.5 text-red-600 dark:text-red-400 shrink-0"

Tff7b72/>

Tff7b72<span Te6edf3class=Ta5d6ff"text-xs text-red-600 dark:text-red-400 wrap-break-word"Tff7b72>Tff7b72{{ Te6edf3errorMessage Tff7b72}}Tff7b72</span>

Tff7b72</div>

Tff7b72<button

Te6edf3:disabled=Ta5d6ff"!canFlash || isFlashing"

Te6edf3data-testid=Ta5d6ff"rnode-flash-btn"

Te6edf3class=Ta5d6ff"w-full inline-flex items-center justify-center gap-2 rounded-xl bg-green-600 hover:bg-green-700 px-4 py-3 text-sm font-bold text-white shadow-lg shadow-green-600/20 transition-all active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"

@Te6edf3click=Ta5d6ff"$emit('flash')"

Tff7b72>

Tff7b72<v-progress-circular Te6edf3v-if=Ta5d6ff"isFlashing" indeterminate Te6edf3size=Ta5d6ff"16" Te6edf3width=Ta5d6ff"2" Tff7b72/>

Tff7b72<MaterialDesignIcon v-else Te6edf3icon-name=Ta5d6ff"flash" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72<spanTff7b72>

Tff7b72{{

Te6edf3isFlashing

? $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.flashing"Tff7b72, Tff7b72{ Te6edf3percentageTff7b72: Te6edf3flashingProgress Tff7b72}Tff7b72)

Tff7b72: $Te6edf3tTff7b72(Ta5d6ff"tools.rnode_flasher.flash_now"Tff7b72)

Tff7b72}}

Tff7b72</span>

Tff7b72</button>

Tff7b72<div Te6edf3v-if=Ta5d6ff"isFlashing" Te6edf3class=Ta5d6ff"space-y-1.5 pt-1" Te6edf3role=Ta5d6ff"status" Te6edf3aria-live=Ta5d6ff"polite"Tff7b72>

Tff7b72<v-progress-linear Te6edf3:model-value=Ta5d6ff"flashingProgress" Te6edf3color=Ta5d6ff"green" Te6edf3height=Ta5d6ff"8" rounded Tff7b72/>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center justify-between text-[10px] font-mono"Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"text-gray-500 dark:text-zinc-500 truncate"Tff7b72>Tff7b72{{ Te6edf3flashingStatus Tff7b72}}Tff7b72</span>

Tff7b72<span Te6edf3class=Ta5d6ff"text-gray-700 dark:text-zinc-300 font-bold"Tff7b72>Tff7b72{{ Te6edf3flashingProgress Tff7b72}}%Tff7b72</span>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

export default {

name: "RNodeFlashAction",

components: { MaterialDesignIcon },

props: {

canFlash: { type: Boolean, default: false },

isFlashing: { type: Boolean, default: false },

flashingProgress: { type: Number, default: 0 },

flashingStatus: { type: String, default: "" },

errorMessage: { type: String, default: null },

},

emits: ["flash"],

};

Tff7b72</script>